<template>
    <div >
    <ul id="ullist">
        <li v-for="(item,index) in leaderboard" :key='index'>
            <div  class="box">
                <img :src="item.coverImgUrl" alt="">
                <div class="p1">
                    <p  v-for ="(item1,index) in item.tracks" :key='index'>
                        {{index+1}}   {{item1.first}} {{item1.second}}
                    </p>


                </div>
            </div>


        </li>
    </ul>


    </div>
</template>

<script>
    export default {
        name: "Leaderboard",

        data() {
            return {
                active: 1,
                leaderboard:[]
            };
        },

        created() {
            this.axios.get("/music-api/toplist/detail").then((res) => {
                console.log(res);
                this.leaderboard = res.data.list
            })
        },



    }

</script>

<style lang="less" scoped>
    .box{
        position: relative;
        margin: 20px;
    }
.box>img{
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    border-radius: 20px;
}
    .p1{
position: absolute;
        left: 150px;
        top: 0;
    }
</style>